<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>查看子设备</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .fixed-title{
        width: 100%;
        background: #CFD8DE;
        padding: 6px 0;
        display: flex;
        font-size: 0.8rem;
      }
      .fixed-title span{
        display: inline-block;
        width: 33%;
        padding: 6px;
        font-size: 0.8rem;
        text-align: center;
        box-sizing: border-box;
      }
      /*.fixed-title span:first-child {
        width: 20%;
      }
      
      .fixed-title span:last-child {
        width: 30%;
      } */
      .list {
        display: flex;
        position: relative;
        padding: 5px 0;
      }
      
      .list::after {
        position: absolute;
        content: '';
        height: 1px;
        background-color: #EEEEEE;
        bottom: 0;
        left: 10px;
        right: 10px;
      }
      
      .list>div {
        width: 33%;
        padding: 6px;
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
        font-size: 14px;
      }
      
      /* .list>div:first-child {
        width: 20%;
      }
      
      .list>div:last-child {
        width: 30%;
      } */
      
      .arrow {
        padding-right: 10px !important;
      }
      
      .arrow:after {
        right: 15px;
        content: '\e583';
      }
      
      .arrow:after {
        font-family: Muiicons;
        font-size: inherit;
        line-height: 1;
        position: absolute;
        top: 50%;
        right: 2px;
        display: inline-block;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-decoration: none;
        color: #bbb;
        -webkit-font-smoothing: antialiased;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">查看子设备</h1>
      </header>
      <div class="mui-content bg-white">
        <div class="fixed-title">
          <span>时间</span>
          <span>操作</span>
          <!-- <span>子设备</span> -->
          <span>操作者</span>
        </div>
        <div class="list align-center" v-for="item in list">
          <div>{{time(item.reviseTime)}}</div>
          <div>{{item.remarks}}</div>
          <!-- <div>9</div> -->
          <div>{{item.operator}}</div>
        </div>
        <div class="list justify-center" v-if="list.length===0">
          <p class="text-black">暂无数据</p>
        </div>
      </div>
    </div>
  </body>
  <script src="../../../js/mui.min.js"></script>
  <script src="../../../js/vue.js"></script>
  <script src="../../../js/jquery-1.7.2.min.js"></script>
  <script src="../js/mkeyplus.base.js"></script>
  <script type="text/javascript">
    mui.init()
    var mask = null;
    var detailVm = null;
    var cv = null; // 当前webview
    var pageId = ""; //获取详情id
    mui.plusReady(function() {
      cv = plus.webview.currentWebview();
      pageId = cv.pageId || '';
      console.log(pageId)
      detailVm.getDetail(pageId)
    })
    detailVm = new Vue({
      el: "#container",
      data: {
        list: []
      },
      created: function() {},
      methods: {
        getDetail: function(pageId) {
          var that = this
          mui.baseApp.httpRequst("/api/metadataRevisionLog/METADATA_DOCUMENT/" + pageId, {}, function(data) {
            that.list = data
          }, function() {
            console.log("获取数据失败");
          })
        },
        time(time) {
          var date = new Date(time);
          var year = date.getFullYear();
          var mon = date.getMonth() + 1;
          var day = date.getDate();
          var hours = date.getHours();
          var minu = date.getMinutes();
          var sec = date.getSeconds();
          return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
        }
      },

    })
  </script>
</html>
